@import "./common/mixin.styl"

html,body
  width 100%
  background rgb(252,252,252)
  overflow-x hidden
  .classify-wrapper
    padding-top computedNum(52)
    .header
      background rgb(252,252,252)
      width computedNum(335)
      height computedNum(50)
      line-height computedNum(50)
      z-index 9
      padding computedNum(0) computedNum(20)
      font-size 0
      border-1px-bottom(#eeeeee)
      position fixed
      top 0
      left 0
      .back-wrapper
        width computedNum(50)
        padding-left computedNum(15)
        background url("../img/back-icon.png") no-repeat left center
        background-size computedNum(8.5) computedNum(15)
        font-size computedNum(16)
        font-family SimHei
      .title
        width computedNum(205)
        font-size computedNum(16)
        vertical-align top
        font-family SimHei
    .type-wrapper
      .type
        font-size 0
        width computedNum(335)
        margin-left computedNum(20)
        border-1px-bottom(#eeeeee)
        li
          font-size computedNum(15)
          color #333333
          height computedNum(50)
          line-height computedNum(50)
          padding-right computedNum(20)
          &.active
            color #e63810
    .list-content
      padding computedNum(20)
      ul
        li
          font-size 0
          margin-bottom computedNum(23)
          &:last-child
            margin-bottom computedNum(0)
          .book-cover
            width computedNum(96)
            height computedNum(122)
            box-shadow 1px 1px 10px 1px #ccc
          .book-detail
            margin-left computedNum(12)
            width computedNum(227)
            vertical-align top
            .book-name
              font-size computedNum(16)
              margin-bottom computedNum(10)
            .book-desc
              font-size computedNum(13)
              color rgb(102,102,102)
              line-height computedNum(20)
              margin-bottom computedNum(14.5)
              text-align justify
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              -webkit-box-orient vertical
              -webkit-line-clamp 3
              .status
                color rgb(99,159,241)
                &.finish
                  color rgb(245,186,153)
            .cat-and-click
              .cat-wrapper
                font-size computedNum(11)
                color #999999
                span
                  display inline-block
                  padding computedNum(2) computedNum(3)
                  line-height computedNum(17)
                  border-1px-all(#999999)
                  vertical-align top
                  margin-right computedNum(7)
                  &:after
                    border-radius computedNum(8)
              .click-wrapper
                .click-icon
                  width computedNum(16)
                  height computedNum(22)
                  background url("../img/click-icon.png") no-repeat center center
                  background-size computedNum(16) computedNum(10)
                  vertical-align top
                .click
                  font-size computedNum(11)
                  color #f8a2a2
                  height computedNum(22)
                  line-height computedNum(24)
                  margin-left computedNum(4)
    .back-top-wrapper
      position fixed
      right computedNum(10)
      bottom computedNum(50)
      width computedNum(35)
      height computedNum(35)
      background url("../img/back-top-icon.png") no-repeat center center
      background-size computedNum(35) computedNum(35)
      z-index 9
      opacity 0
  .load-wrapper
    padding computedNum(5) 0
    display none
  .nor-more
    font-size computedNum(13)
    padding computedNum(10) 0
    color #999999
    display none